<template>
  <div class="body1" style="padding-top:10px;">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="4">
        <div class="grid-content bg-purple-dark">
          <div>合同总金额</div>
          <div>{{count.totalMoney}}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light">
         <div>已送货</div>
          <div>{{count.takeOk}}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
         <div>未送货</div>
          <div>{{count.takeNo}}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light">
         <div>已收款</div>
          <div>{{count.payOk}}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-dark">
         <div>未收款</div>
          <div>{{count.payNo}}</div>
        </div>
      </el-col>
    </el-row>

    <div class="form_select">
      <div>
          <el-button type="primary"  size="small" @click="selectShow = !selectShow">
          &nbsp;&nbsp;搜&nbsp;&nbsp;索&nbsp;&nbsp;
          </el-button>
      </div>
      <div class="select_right">
          <el-dropdown>
            <el-button type="primary" size="small">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="cateClick('cateShow')">客户分类</el-dropdown-item>
              <el-dropdown-item @click.native="exportExcel(1)">导出当页</el-dropdown-item>
              <el-dropdown-item @click.native="exportExcel(2)">导出全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary"  size="small" @click="add">新增客户</el-button>
      </div>
    </div>
    <div class="form_select1" v-show="selectShow">
        <div class="select_font">
           客户名称:<el-input class="select_input1" size="small" v-model="name" placeholder="客户名称"></el-input>
        </div>
        <div class="select_font">
           客户电话:<el-input class="select_input1" size="small" v-model="name" placeholder="客户电话"></el-input>
        </div>
        <div class="select_font">
           客户分类:<el-select class="select_option1" size="small" v-model="cid" placeholder="请选择">
         <el-option
              v-for="item in cate"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="select_font">
           客户状态:<el-select class="select_option1" size="small" v-model="status" placeholder="请选择">
         <el-option
              v-for="(item,index) in statusArr"
              :key="index"
              :label="item"
              :value="index">
            </el-option>
          </el-select>
        </div>
        <div class="select_font">
           开始日期: <el-date-picker
            @change="sdateChage"
            v-model="sdate"
            type="date"
            placeholder="选择结束日期" 
            size="small" 
            class="select_option1"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            >
          </el-date-picker>
        </div>
        <div class="select_font">
           结束日期: <el-date-picker
            @change="edateChage"
            v-model="edate"
            type="date"
            placeholder="选择结束日期" 
            size="small" 
            class="select_option1"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            >
          </el-date-picker>
        </div>
        <el-button type="primary"  size="small" @click="search" style="margin-top:20px;">
        &nbsp;&nbsp;搜&nbsp;&nbsp;索&nbsp;&nbsp;</el-button>
    </div>
    <userTable :list="list" @func="editTrue"></userTable>
    <userAdd :show="addShow" @func="change" :cate="cateArr"></userAdd>
    <userEdit :show="editShow" :item="item" :cate="cateArr" :tags="tags" @func="change"></userEdit>
    <userCate :show="cateShow" :cate="cateArr" @func="change"></userCate>
    </div>
   </div>


</template>
 
<script>
import userAdd from "./add"
import userEdit from "./edit"
import userTable from "./table"
import userCate from "./cate"
import {excelExport} from "../../public/excelExport"
export default {
  name: "Goods",
  data() {
    return {
      list:[],
      name:'',
      phone:'',
      cate:[
        {id:0,name:'全部'}
      ],
      statusArr:['全部','启用','禁用'],
      status:0,
      cid:0,
      item:{},
      addShow:false,
      editShow:false,
      cateShow:false,
      tags:[],
      cateArr:[],
      selectShow:false,
      edate:'',
      sdate:'',
      count:{}
    };
  },
  components: {
    "userAdd": userAdd,
    "userEdit": userEdit,
    "userTable": userTable,
    "userCate":userCate
  },
  created: function() {
    this.getList()
    this.getCate()
    this.getCount()
  },
  methods: {
    goadd:function(){
      this.$router.push({path : "/add"})
    },
    getCount:function(){
    var data = {
        store_id:localStorage.getItem('store_id')
      }
      var that = this
      this.$get('user/getCount',data).then((res) => {
        that.count = res.data
      })
    },
    getList:function() {
      var data = {
        store_id:localStorage.getItem('store_id'),
        name:this.name,
        cid:this.cid,
        phone:this.phone,
        status:this.status,
        sdate:this.sdate,
        edate:this.edate
      }
      var that = this
      this.$get('user/all',data).then((res) => {
        that.list = res.data
      })
    },
    getCate:function(){
      var data = {store_id:localStorage.getItem('store_id')}
      var that = this
      this.$get('user/cate',data).then((res) => {
        var cate = that.cate
        that.cate = cate.concat(res.data)
        that.cateArr = res.data
      })
    },
    sdateChage:function(e){
      this.sdate = e
    },
    edateChage:function(e){
      this.edate = e
    },
    search:function(){
      if(this.sdate && !this.edate){
        this.$message.error('请选择开始时间和结束时间!');
        return;
      }
      if(!this.sdate && this.edate){
        this.$message.error('请选择开始时间和结束时间!');
        return;
      }
      if(this.sdate > this.edate){
        this.$message.error('开始时间不能大于结束时间!');
        return;
      }
      this.getList()
    },
    add:function(){
      this.addShow = true
    },
    change:function(data){
      console.log('1111',data)
      this[data.key] = false
      if(data.key == 'cateShow'){
        this.cate = []
        this.getCate()
      }
      if(data.type == 1){
        this.getList()
      }
    },
    editTrue:function(data){
      this[data.key] = true
      this.item = data.item
      this.tags = this.item.tag.split(',')
    },
    cateClick:function(key){
      this[key] = true
    },
    exportExcel:function() {
      let title = '客户信息表'
      excelExport(title)
      return false;
    }
  }
};
</script>
<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    height: 80px;
    text-align:center;
    display: flex;
    flex-direction:column;
    justify-content:center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>